<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据节点信息查找</title>
    <script>
        function f1(){
            // 找到id属性值为btn的元素,只返回一个对象
            let btn = document.getElementById("btn");
            console.log(btn);
            let p1 = document.getElementById("p1");
            console.log(p1)
            let d1 = document.getElementById("d1");
            console.log(d1)
        }
        function f2(){
            // 根据name属性查找元素,可以返回多个
            let n = document.getElementsByName("n");
            console.log(n)
        }
        function f3(){
            let ds = document.getElementsByTagName("div");
            console.log(ds)
        }
        function f4(){
            // 只返回匹配到的第一个元素
            // 参数是选择器
            let c1 = document.querySelector(".c1");
            console.log(c1)
            let ps = document.querySelectorAll("p")
            console.log(ps)
            let ns = document.querySelectorAll("p[name='n']")
            console.log(ns)
        }
    </script>
</head>
<body>
<button class="c1" id="btn" onclick="f1()">根据id属性查找对应元素</button>
<button name="n" onclick="f2()">根据name属性查找对应元素</button>
<button name="n" onclick="f3()">根据标签名查找对应元素</button>
<button class="c1" name="n" onclick="f4()">根据选择器查找对应元素</button>
<p class="c1" name="n" id="p1">这是第一个段落</p>
<p name="n">第2个段落</p>
<p class="c1">第3个段落</p>
<div id="d1">这是第一个div</div>
<div name="n">第2个div</div>
<div>第3个div</div>
</body>
</html>